# 线索管理页 - TAPD需求文档 需求背景（补充业务场景与触发原因）： 后台管理系统需要提供线索管理功能，让管理员能够查看、搜索、筛选和管理系统中的所有线索。线索来源于AI智能报价系统自动生成或管理员手动录入，管理员需要能够快速查找特定线索，查看线索的详细信息（包括需求内容、AI预估报价、联系方式等），对线索进行状态转换（待跟进、跟进中、已转化、已失效），添加跟进记录，并能够批量操作多条线索。这是后台管理系统的核心功能之一，为销售团队提供线索管理和跟进工具，提升销售效率和转化率。 需求价值（补充对业务的价值）： 1. **提升线索管理效率**：通过统一的线索管理界面，管理员可以快速查看和管理所有线索，无需逐个查找，大幅提升管理效率。 2. **支持多维度搜索和筛选**：提供搜索功能（需求内容、报价金额）和高级筛选功能（时间范围、报价区间、来源类型、状态），让管理员能够快速定位目标线索，特别是在线索数量较多时非常有用。 3. **实时统计概览**：通过统计卡片实时展示总线索数、待跟进、跟进中、已转化等数据，让管理员快速了解线索整体情况，便于进行业务决策。 4. **状态管理**：通过线索状态标识（待跟进、跟进中、已转化、已失效），管理员可以快速了解线索状态，便于进行线索跟进和转化管理。 5. **跟进记录管理**：支持添加跟进记录，记录跟进方式、跟进内容和下次跟进时间，帮助销售团队更好地管理客户沟通历史，提升跟进质量。 6. **批量操作支持**：支持批量选择线索并批量转换状态，提升批量处理效率，特别适用于大量线索的状态调整场景。 7. **数据导出功能**：支持导出线索数据为CSV文件，便于进行数据分析和报表制作。 8. **为后续功能提供基础**：线索列表页作为线索管理的入口，为后续的线索详情查看、需求转化等功能提供基础。 需求目标（说明该需求要解决的问题或达成的目标）： 1. **提供线索列表展示**：以卡片形式清晰展示所有线索的基本信息，包括需求描述、AI预估报价、联系方式、状态、创建时间等。 2. **支持线索搜索**：提供搜索功能，支持按需求内容、报价金额进行搜索，帮助管理员快速定位目标线索。 3. **支持多维度筛选**：提供状态筛选和高级筛选功能，支持按时间范围、报价区间、来源类型、状态等多维度筛选线索。 4. **提供统计概览**：实时展示总线索数、待跟进、跟进中、已转化等统计数据，支持点击统计卡片快速筛选对应状态的线索。 5. **支持线索状态转换**：提供单个和批量状态转换功能，允许管理员将线索状态在待跟进、跟进中、已转化、已失效之间转换。 6. **支持跟进记录管理**：提供添加跟进记录功能，记录跟进方式、跟进内容和下次跟进时间，并支持查看历史跟进记录。 7. **支持批量操作**：支持批量选择线索并批量转换状态，提升批量处理效率。 8. **支持数据导出**：支持将筛选后的线索数据导出为CSV文件，便于进行数据分析。 9. **支持排序功能**：支持按创建时间（最新/最早）和报价金额（从高到低/从低到高）排序线索。 10. **支持分页浏览**：当线索数量较多时，通过分页功能分批次展示线索，提升页面加载速度和浏览体验。 用户故事（不同的视角下，希望的结果）： **作为管理员，我希望：** - 能够在一个页面中查看所有线索的基本信息，包括需求描述、AI预估报价、联系方式、状态、创建时间等。 - 能够通过搜索功能快速找到特定线索，支持按需求内容、报价金额进行搜索。 - 能够通过状态筛选和高级筛选功能，快速筛选出符合条件的线索。 - 能够通过统计卡片快速了解线索整体情况，并点击统计卡片快速筛选对应状态的线索。 - 能够对线索进行状态转换，将线索状态在待跟进、跟进中、已转化、已失效之间转换。 - 能够添加跟进记录，记录跟进方式、跟进内容和下次跟进时间，并能够查看历史跟进记录。 - 能够批量选择线索并批量转换状态，提升批量处理效率。 - 能够将筛选后的线索数据导出为CSV文件，便于进行数据分析。 - 能够按创建时间或报价金额对线索进行排序，便于按不同维度查看线索。 - 当线索数量较多时，能够通过分页功能浏览不同页面的线索。 **作为销售顾问，我希望：** - 能够快速查看分配给自己的线索，了解线索的详细信息和状态。 - 能够快速添加跟进记录，记录与客户的沟通内容，便于后续跟进。 - 能够快速转换线索状态，标记线索的跟进进度。 - 能够查看线索的历史跟进记录，了解之前的沟通情况。 **作为产品经理，我希望：** - 线索管理页面功能完整，能够满足管理员和销售顾问的日常线索管理需求。 - 搜索和筛选功能高效准确，能够帮助用户快速定位目标线索。 - 状态转换和跟进记录功能简单直观，降低用户的操作成本，减少操作错误。 - 线索列表信息展示清晰，便于用户快速浏览和查找。 - 批量操作功能提升处理效率，特别适用于大量线索的场景。 - 页面性能良好，即使线索数量较多时也能流畅使用。 **作为业务方，我希望：** - 通过线索管理功能，销售团队能够高效管理所有线索，提升销售效率。 - 通过搜索和筛选功能，销售团队能够快速响应客户的相关查询需求。 - 通过状态管理和跟进记录功能，销售团队能够更好地跟进线索，提升转化率。 - 通过统计概览功能，管理层能够实时了解线索整体情况，便于进行业务决策。 - 通过数据导出功能，能够进行数据分析和报表制作，支持业务决策。 需求描述（详细阐述需求的行为逻辑、交互流程或后台规则）： **1. 页面布局结构** - 页面采用垂直布局，包含以下主要区域（从上到下）： - 页面标题和操作栏（包含"线索管理"标题、总线索数、高级筛选按钮、导出按钮） - 统计概览区域（四个统计卡片：总线索数、待跟进、跟进中、已转化） - 搜索和筛选区域（包含搜索框和状态筛选标签） - 批量操作工具栏（选择线索后显示，包含已选择数量、批量转换状态按钮、取消选择按钮） - 排序和操作栏（包含排序选择器和全选复选框） - 线索列表区域（卡片形式展示线索信息） - 分页区域（显示分页信息和分页按钮） **2. 页面标题和操作栏** - 显示"线索管理"标题，字体较大（text-2xl），加粗显示 - 显示总线索数，格式："共 X 条线索"，数字高亮显示（indigo-600） - 右侧显示"高级筛选"按钮和"导出"按钮 - 点击"高级筛选"按钮，弹出高级筛选模态框 - 点击"导出"按钮，导出当前筛选条件下的线索数据为CSV文件 **3. 统计概览区域** - 显示四个统计卡片，每个卡片包含： - 数字统计（大号字体，加粗显示） - 统计标签（小号字体，灰色文字） - 统计卡片类型： - 总线索数：灰色左边框，点击筛选全部线索 - 待跟进：黄色左边框，点击筛选待跟进状态的线索 - 跟进中：蓝色左边框，点击筛选跟进中状态的线索 - 已转化：绿色左边框，点击筛选已转化状态的线索 - 点击统计卡片，自动应用对应的状态筛选，更新线索列表 **4. 搜索和筛选区域** - **状态筛选标签**： - 显示多个状态筛选按钮：全部、待跟进、跟进中、已转化、已失效 - 当前选中的状态按钮高亮显示（indigo-600背景，白色文字） - 未选中的状态按钮灰色背景，灰色文字 - 点击状态筛选按钮，应用对应的状态筛选，更新线索列表 **5. 高级筛选功能** - **筛选条件**： - 创建时间范围：开始日期和结束日期选择器 - 报价金额区间：最低金额和最高金额输入框（数字类型） - 来源类型：多选框，支持选择AI智能报价、手动录入、推荐 - 状态：多选框，支持选择待跟进、跟进中、已转化、已失效 - **筛选操作**： - 点击"应用筛选"按钮，应用高级筛选条件，关闭弹窗，更新线索列表 - 点击"重置"按钮，清空所有筛选条件 - 点击"取消"按钮或关闭按钮，关闭弹窗，不应用筛选条件 - **筛选逻辑**： - 高级筛选条件与基础筛选条件（搜索、状态筛选）组合应用 - 如果所有高级筛选条件都为空，则清除高级筛选，仅应用基础筛选条件 **6. 批量操作工具栏** - **显示条件**： - 当有线索被选中时，显示批量操作工具栏 - 当没有线索被选中时，隐藏批量操作工具栏 - **工具栏内容**： - 显示已选择数量，格式："已选择 X 项" - 显示"批量转换状态"按钮，点击弹出批量转换状态模态框 - 显示"取消选择"按钮，点击清除所有选择 - **批量转换状态**： - 点击"批量转换状态"按钮，弹出批量转换状态模态框 - 模态框显示已选择的线索数量 - 提供状态选择：待跟进、跟进中、已转化、已失效 - 选择状态后，点击"确认转换"按钮，批量更新选中线索的状态 - 转换成功后，清除选择，关闭弹窗，更新线索列表和统计 **7. 排序和操作栏** - **排序功能**： - 显示排序选择器，支持以下排序方式： - 创建时间（最新） - 创建时间（最早） - 报价金额（从高到低） - 报价金额（从低到高） - 选择排序方式后，自动应用排序，更新线索列表 - **全选功能**： - 显示全选复选框和"全选"标签 - 点击全选复选框，选中或取消选中当前页面的所有线索 - 全选状态根据当前页面的选中情况自动更新 **8. 线索列表展示** - **线索卡片结构**： - 每个线索以卡片形式展示，包含以下内容： - 复选框（用于批量选择） - 状态标签区域（来源类型、业务类型、状态） - 需求描述（完整文本显示） - AI预估报价（带图标和金额显示） - 联系信息（电话号码，脱敏显示，支持查看完整号码） - 时间信息（创建时间，最后跟进时间，转化时间等） - 跟进记录（如有，支持展开/收起） - 操作按钮（转换状态、添加跟进记录、查看需求等） - **状态标签**： - 来源类型标签：AI智能报价（indigo背景）、手动录入、推荐等 - 业务类型标签：数字化转型、流程自动化、AI+RPA、管理咨询等（purple背景） - 状态标签： - 待跟进：黄色背景（yellow-100），黄色文字（yellow-600） - 跟进中：蓝色背景（blue-100），蓝色文字（blue-600） - 已转化：绿色背景（green-100），绿色文字（green-600） - 已失效：红色背景（red-100），红色文字（red-600） - **需求描述**： - 完整显示需求描述文本 - 搜索关键词高亮显示（黄色背景） - **AI预估报价**： - 显示AI机器人图标 - 显示"AI预估报价："标签 - 显示报价金额，格式："¥X万"，大号字体，加粗显示，indigo颜色 - **联系信息**： - 显示电话图标 - 显示"联系电话："标签 - 显示脱敏手机号，格式："138****8000" - 显示"查看完整号码"按钮，点击后显示完整手机号，隐藏按钮。点击后需要有相关的日志记录 - **时间信息**： - 显示创建时间，格式："2024-01-20 15:30" - 如有最后跟进时间，显示"最后跟进 2024-01-20 14:30" - 如已转化，显示"转化于 2024-01-18 16:20" - 如已失效，显示"失效于 2024-01-22 10:30" - **跟进记录**： - 如有跟进记录，显示"跟进记录"标题和"展开全部"按钮 - 默认显示最近一条跟进记录 - 点击"展开全部"按钮，展开所有跟进记录，按钮文字变为"收起" - 跟进记录以时间线形式展示，包含： - 跟进时间 - 跟进方式标签（电话、微信、邮件、面访、其他） - 跟进人 - 跟进内容 - **操作按钮**： - "转换状态"按钮：点击弹出转换状态模态框 - "添加跟进记录"按钮：点击弹出添加跟进记录模态框 - "查看需求"按钮（仅已转化状态显示）：点击跳转到需求详情页 **9. 转换状态功能** - **打开转换状态模态框**： - 点击线索卡片上的"转换状态"按钮，弹出转换状态模态框 - 模态框显示当前状态 - 提供状态选择：待跟进、跟进中、已转化、已失效 - 当前状态选项禁用，不可选择 - **状态转换**： - 选择新状态后，点击"确认转换"按钮，更新线索状态 - 转换成功后，更新线索卡片的状态标签和状态数据 - 更新统计数据和筛选结果 - 显示成功提示 **10. 添加跟进记录功能** - **打开添加跟进记录模态框**： - 点击线索卡片上的"添加跟进记录"按钮，弹出添加跟进记录模态框 - 模态框显示表单字段 - **表单字段**： - 跟进方式：下拉选择框，必填，选项包括：电话、微信、邮件、面访、其他 - 跟进内容：多行文本输入框，必填，最少10个字符，最多500个字符，显示字符计数 - 下次跟进时间：日期时间选择器，可选 - **表单提交**： - 点击"保存"按钮提交表单 - 提交前进行表单验证：跟进方式和跟进内容为必填项，跟进内容长度验证 - 验证通过后，调用后端接口保存跟进记录 - 保存成功后，关闭弹窗，重置表单，更新线索卡片的跟进记录显示 **11. 导出功能** - **导出操作**： - 点击"导出"按钮，导出当前筛选条件下的线索数据 - 显示加载状态 - 导出数据包含以下字段：状态、需求内容、报价金额、联系电话、来源、创建时间 - 导出文件格式：CSV，文件名格式："线索列表_YYYY-MM-DD.csv" - 导出成功后，显示成功提示 **12. 分页功能** - **分页信息**： - 显示当前页数据范围，格式："显示 X 到 Y 条，共 Z 条" - 显示总线索数（与筛选后的结果一致） - **分页按钮**： - "上一页"按钮：第一页时禁用（disabled状态） - 页码按钮：显示当前页码和相邻页码（最多显示5个页码） - 当前页码高亮显示（indigo-600背景，白色文字） - "下一页"按钮：最后一页时禁用 - **分页交互**： - 点击页码按钮，跳转到对应页面，更新线索列表显示 - 点击"上一页"或"下一页"按钮，跳转到上一页或下一页 - 切换页面时，自动滚动到页面顶部 **13. 数据加载规则** - 页面加载时，调用后端接口获取线索列表数据 - 支持分页参数，每页显示10条数据（可根据实际需求调整） - 搜索时，调用后端接口，传递搜索关键词参数 - 筛选时，调用后端接口，传递筛选条件参数 - 排序时，调用后端接口，传递排序参数 - 状态转换、添加跟进记录等操作后，刷新线索列表，显示最新数据 **14. 空状态处理** - 当筛选后无结果时，显示空状态提示 - 空状态显示图标、提示文字："暂无数据"、"没有找到符合条件的线索" **15. 异常处理** - 如果后端接口请求失败，显示友好的错误提示 - 如果搜索无结果，显示空状态提示 - 如果线索列表为空，显示空状态提示 - 确保页面在各种异常情况下都能正常显示基本内容 **16. 响应式设计** - 页面支持响应式布局，适配不同屏幕尺寸 - 移动端优化：线索卡片垂直布局，按钮全宽显示，筛选标签支持横向滚动 验收标准（列出明确、可验证的交付标准）： **1. 页面布局验收** - [ ] 页面标题"线索管理"正确显示，字体大小和样式符合设计要求 - [ ] 总线索数正确显示，格式为"共 X 条线索" - [ ] "高级筛选"和"导出"按钮正确显示在标题右侧，样式符合设计要求 - [ ] 统计概览区域正确显示四个统计卡片，布局合理 - [ ] 搜索和筛选区域正确显示，布局合理 - [ ] 线索列表卡片正确显示，布局合理 - [ ] 分页区域正确显示在列表下方 **2. 统计概览功能验收** - [ ] 统计卡片正确显示总线索数、待跟进、跟进中、已转化数据 - [ ] 统计数据实时更新，与线索列表数据一致 - [ ] 点击统计卡片，正确应用对应的状态筛选，更新线索列表 - [ ] 统计卡片hover效果正常，点击反馈正常 **3. 搜索功能验收** - [ ] 搜索框正确显示，占位符提示正确 - [ ] 输入搜索关键词后，实时触发搜索（防抖300ms），正确应用筛选条件 - [ ] 搜索结果正确显示在线索列表中 - [ ] 搜索关键词在需求描述中正确高亮显示 - [ ] 搜索无结果时，显示空状态提示 **4. 状态筛选功能验收** - [ ] 状态筛选标签正确显示：全部、待跟进、跟进中、已转化、已失效 - [ ] 当前选中的状态按钮正确高亮显示 - [ ] 点击状态筛选按钮，正确应用对应的状态筛选，更新线索列表 - [ ] 状态筛选与搜索正确组合应用 **6. 批量操作功能验收** - [ ] 选择线索后，正确显示批量操作工具栏 - [ ] 已选择数量正确显示，格式为"已选择 X 项" - [ ] 点击"批量转换状态"按钮，正确弹出批量转换状态模态框 - [ ] 模态框显示已选择的线索数量 - [ ] 选择状态后，点击"确认转换"按钮，正确批量更新选中线索的状态 - [ ] 转换成功后，正确清除选择，关闭弹窗，更新线索列表和统计 - [ ] 点击"取消选择"按钮，正确清除所有选择，隐藏工具栏 **7. 排序功能验收** - [ ] 排序选择器正确显示，包含所有排序选项 - [ ] 选择排序方式后，正确应用排序，更新线索列表 - [ ] 排序结果正确：创建时间排序按时间顺序，报价金额排序按金额顺序 **8. 全选功能验收** - [ ] 全选复选框正确显示 - [ ] 点击全选复选框，正确选中或取消选中当前页面的所有线索 - [ ] 全选状态根据当前页面的选中情况正确更新 **9. 线索列表展示验收** - [ ] 线索卡片正确显示，包含所有必需信息：状态标签、需求描述、AI预估报价、联系信息、时间信息、操作按钮 - [ ] 状态标签正确显示：来源类型、业务类型、状态，颜色和样式符合设计要求 - [ ] 需求描述正确显示，搜索关键词正确高亮显示 - [ ] AI预估报价正确显示，格式为"¥X万"，样式符合设计要求 - [ ] 联系信息正确显示，手机号脱敏显示（格式：138****8000） - [ ] 点击"查看完整号码"按钮，正确显示完整手机号，隐藏按钮 - [ ] 时间信息正确显示：创建时间、最后跟进时间、转化时间、失效时间 - [ ] 跟进记录正确显示，支持展开/收起功能 **10. 转换状态功能验收** - [ ] 点击"转换状态"按钮，正确弹出转换状态模态框 - [ ] 模态框显示当前状态，当前状态选项禁用 - [ ] 选择新状态后，点击"确认转换"按钮，正确更新线索状态 - [ ] 转换成功后，正确更新线索卡片的状态标签和状态数据 - [ ] 正确更新统计数据和筛选结果 - [ ] 显示成功提示 **11. 添加跟进记录功能验收** - [ ] 点击"添加跟进记录"按钮，正确弹出添加跟进记录模态框 - [ ] 表单字段正确显示：跟进方式（必填）、跟进内容（必填，10-500字符）、下次跟进时间（可选） - [ ] 跟进内容输入框正确显示字符计数 - [ ] 表单验证正常：必填项验证、字符长度验证 - [ ] 点击"保存"按钮，验证通过后，正确调用后端接口保存跟进记录 - [ ] 保存成功后，正确关闭弹窗，重置表单，更新线索卡片的跟进记录显示 - [ ] 显示成功提示 **12. 跟进记录展示验收** - [ ] 跟进记录正确显示，以时间线形式展示 - [ ] 跟进记录包含：跟进时间、跟进方式标签、跟进人、跟进内容 - [ ] 默认显示最近一条跟进记录 - [ ] 点击"展开全部"按钮，正确展开所有跟进记录，按钮文字变为"收起" - [ ] 点击"收起"按钮，正确收起多余跟进记录，按钮文字变为"展开全部" **13. 导出功能验收** - [ ] 点击"导出"按钮，正确导出当前筛选条件下的线索数据 - [ ] 显示加载状态 - [ ] 导出数据包含所有必需字段：状态、需求内容、报价金额、联系电话、来源、创建时间 - [ ] 导出文件格式正确：CSV，文件名格式正确："线索列表_YYYY-MM-DD.csv" - [ ] 导出成功后，显示成功提示 **14. 分页功能验收** - [ ] 分页信息正确显示，格式为"显示 X 到 Y 条，共 Z 条" - [ ] 分页按钮正确显示：上一页、页码、下一页 - [ ] 当前页码正确高亮显示（indigo-600背景，白色文字） - [ ] 第一页时，"上一页"按钮禁用 - [ ] 最后一页时，"下一页"按钮禁用 - [ ] 点击页码按钮，正确跳转到对应页面，更新线索列表显示 - [ ] 点击"上一页"或"下一页"按钮，正确跳转到上一页或下一页 - [ ] 切换页面时，自动滚动到页面顶部 **15. 数据加载验收** - [ ] 页面加载时，正确调用后端接口获取线索列表数据 - [ ] 线索列表数据正确显示在卡片中 - [ ] 分页参数正确传递，每页数据量符合要求（10条） - [ ] 搜索时，正确调用后端接口，传递搜索关键词参数 - [ ] 筛选时，正确调用后端接口，传递筛选条件参数 - [ ] 排序时，正确调用后端接口，传递排序参数 - [ ] 状态转换、添加跟进记录等操作后，正确刷新线索列表，显示最新数据 **16. 空状态处理验收** - [ ] 筛选后无结果时，正确显示空状态提示 - [ ] 空状态显示图标和提示文字："暂无数据"、"没有找到符合条件的线索" **17. 异常处理验收** - [ ] 后端接口请求失败时，显示友好的错误提示 - [ ] 搜索无结果时，显示空状态提示 - [ ] 线索列表为空时，显示空状态提示 - [ ] 页面在各种异常情况下都能正常显示基本内容 **18. 响应式设计验收** - [ ] 页面支持响应式布局，适配不同屏幕尺寸 - [ ] 移动端优化：线索卡片垂直布局，按钮全宽显示，筛选标签支持横向滚动 - [ ] 模态框在移动端正确显示，宽度和高度适配屏幕 **19. 交互体验验收** - [ ] 按钮点击反馈正常，有hover效果 - [ ] 线索卡片hover效果正常，背景色变化 - [ ] 模态框打开和关闭动画流畅 - [ ] 页面加载流畅，无卡顿现象 - [ ] 搜索防抖功能正常，不会频繁触发请求 **20. 性能要求** - [ ] 页面加载时间不超过2秒 - [ ] 搜索响应时间不超过1秒 - [ ] 筛选和排序操作响应及时，无延迟感 - [ ] 分页切换流畅，无卡顿现象 - [ ] 批量操作响应及时，无延迟感